<script setup lang="ts">
import { ReloadOutlined, SyncOutlined } from '@ant-design/icons-vue';
import Drawer from './components/Drawer.vue';
import { ref } from 'vue'
import { GetViewAssessmentStauts, AddAssessment, PostEndAssessment, PostBeginAssessment, PostStartSummary,DelAssessment } from '@/api/main'
import { Moment } from 'moment';
import moment from 'moment';
import { message } from 'ant-design-vue';
import useUserStore from "@/stores/modules/user";
const userStore = useUserStore()
const dataSource = ref([])
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: "center",
        slots: { customRender: 'index' },
    },
    {
        title: '考核名称',
        dataIndex: 'name',
        key: 'name',
         align:"center"
    },
    {
        title: '创建时间',
        dataIndex: 'createdate',
        key: 'createdate',
         align:"center"
    },
    {
        title: '流程状态',
        dataIndex: 'status',
        key: 'status',
        slots: { customRender: 'status' },
         align:"center"
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        align: "center",
        slots: { customRender: 'action' },
    },
]
// 获取数据
const getData = () => {
    GetViewAssessmentStauts({empId: userStore.empid,}).then((response: any) => {
        dataSource.value = response.data
    })
}
getData()
// model 日期选择
const assessmentMonth = ref<Moment>(moment(new Date).format("YYYY-MM"))
// model 是否展示
const visible = ref<boolean>(false)
// 展示model
const showModel = () => {
    visible.value = true
}
// model 确认
const handleOk = () => {
    let formData = new FormData();
    formData.append("assessmentMonth", moment(assessmentMonth.value).format("YYYY-MM"));
    AddAssessment(formData).then((response: any) => {
        if (response.code == -1) {
            message.error(response.msg)
        } else {
            message.success(response.msg)
            visible.value = false
            getData()
        }
    })
}
// 关闭model
const handleCancel = () => {
    visible.value = false
}
// 抽屉
const drawerRefs = ref();
const drawerRecord = ref(null)
const handleShowDrawer = (record: any) => {
    drawerRefs.value.drawerVisible = true;
    drawerRecord.value = record
    drawerRefs.value.detailsGetData()
}
// 停用
const confirm = (record: any) => {
    PostEndAssessment({
        khid: record.id
    }).then((response: any) => {
        if (response.code == 200) {
            message.success(response.msg)
            getData()
        } else {
            message.error(response.msg)
        }

    })
}
// 启用

const isEnable = ref<boolean>(false)
const enableConfirm = (record: any) => {
    isEnable.value = true
    PostBeginAssessment({
        khid: record.id
    }).then((response: any) => {
        isEnable.value = false
        if (response.code == 200) {
            message.success(response.msg)
            handleStartSummary(record)
            getData()
        } else {
            message.error(response.msg)
            getData()
        }

    })
}
// 开始汇总 
const handleStartSummary = (record: any) => {
    PostStartSummary({
        assessmentId: record.id
    }).then((response: any) => {
        if (response.code == 200) {
            // message.success(response.msg)
            getData()
        } else {
            message.error(response.msg)
        }
    })
}
const handleDel = (record: any) => {
    DelAssessment(record).then((response: any) => {
        if (response.code == 200) {
            message.success(response.msg)
            getData()
        } else {
            message.error(response.msg)
        }

    })
}
</script>

<template>
    <div style="display: flex;align-items: center;justify-content: space-between;"> <a-button type="primary"
            @click="showModel">发起考核</a-button>
        <ReloadOutlined class="operation-btn" @click="getData" />
    </div>
    <br />
    <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false" rowKey="id">
        <template #index="{ index }">
            {{ index + 1 }}
        </template>
        <template #status="{ record }">
            <span>
                <a-tag color="error" v-if="record.status == 0">未启用</a-tag>
                <a-tag color="#87d068" v-if="record.status == 1 || record.status == 3">进行中</a-tag>
                <a-tag v-if="record.status == 2">已结束</a-tag>
            </span>
        </template>

        <template #action="{ record }">
            <span>
                <a-tag color="error" v-if="record.status ==0"
                style="cursor: pointer;" @click="handleDel(record)">删除</a-tag>
                <a-popconfirm title="操作警告：是否启用？" ok-text="是" cancel-text="否" @confirm="enableConfirm(record)">
                    <a-tag color="#87d068" v-if="record.status == 0 && isEnable == false"
                        style="cursor: pointer;">启用</a-tag>
                    <a-tag color="processing" v-if="record.status == 0 && isEnable">
                        <template #icon>
                            <sync-outlined :spin="true" />
                        </template>
                        加载中
                    </a-tag>
                </a-popconfirm>

                <a-popconfirm title="操作警告：是否停用？" ok-text="是" cancel-text="否" @confirm="confirm(record)">
                    <a-tag color="error" v-if="record.status == 1 || record.status == 3"
                        style="cursor: pointer;">停用</a-tag>
                </a-popconfirm>
                <a-tag color="#108ee9" v-if="record.status != 0 && record.status != 1" style="cursor: pointer;"
                    @click="handleShowDrawer(record)">详情</a-tag>
            </span>
        </template>

    </a-table>
    <a-modal v-model:visible="visible" title="发起考核" @ok="handleOk" @cancel="handleCancel" okText="提交" cancelText="取消">
        <a-month-picker v-model:value="assessmentMonth" placeholder="请选择考核月份">
        </a-month-picker>
        <br>
        <br>
        <div>
            Tips: 您选择的月份会自动往前推两个月进行考核！
        </div>
    </a-modal>
    <Drawer :drawerRecord="drawerRecord" ref="drawerRefs" />
</template>

<style scoped>
.operation-btn {
    border: 1px solid #F2F3F5;
    width: 35px;
    height: 35px;
    display: block;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 700;
}

.operation-btn:hover {
    background: #f2f3f5;
    color: #1677ff;
}
</style>